<template>
  <form class="page page-reader" @submit.prevent>
    <h4 class="text-center">文档阅读器</h4>
    <fieldset class="fieldset-options">
      <legend>参数设置</legend>
      <div class="row">
        <div class="col-4">
          <div class="row-flex" align="center">
            <div class="row-flex-prefix">文档类型</div>
            <div class="row-flex-main">
              <select class="form-control" v-model="fileType">
                <option v-for="(v, i) in fileTypeList" :key="i" :value="v.value" >{{ v.label }}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-8">
          <div class="input-group">
            <div class="input-group-prepend">
              <select class="form-control" v-model="pathType" style="width: 6em;">
                <option v-for="(v, i) in pathTypeList" :key="i" :value="v.value" >{{ v.label }}</option>
              </select>
            </div>
            <input v-if="pathType==='remote'" class="form-control" v-model.trim="fileUrl" type="text" placeholder="请输入文档网址" />
            <input v-else-if="pathType==='local'" class="form-control" type="file" @change="fileChange" placeholder="请选择文件" />
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" @click.prevent="submitHandler">确定</button>
            </div>
          </div>
          <!-- <div class="row-flex" align="center">
            <div class="row-flex-prefix">文件位置</div>
            <div class="row-flex-main">
              <input class="form-control" type="text" v-model="filePath" placeholder="请选择要浏览的文件" />
            </div>
            <div class="row-flex-suffix">
              <x-button @click="setFilePath">选择...</x-button>
            </div>
          </div> -->
        </div>
      </div>
    </fieldset>
    <fieldset class="fieldset-content" ref="fieldsetContent">
      <legend>阅读区域</legend>
      <div class="reader-area">
        <component :is="fileTypeActive.component" :url="url" :count="count"></component>
      </div>
      <button type="button" class="btn btn-link" @click.prevent="fullscreenSwitch">全屏切换</button>
    </fieldset>
  </form>
</template>

<script>
import cmpEpub from './cmp-epub.vue'
// const { remote } = global.require("electron");
// const { dialog } = remote;
// const selfWindow = remote.getCurrentWindow();
const File2ArrayBuffer = (file) => {
  return new Promise((resolve, reject) => {
    let fr = new FileReader()
    fr.addEventListener('load', () => {
      resolve(fr.result)
    })
    fr.addEventListener('error', (err) => {
      reject(err)
    })
    fr.readAsArrayBuffer(file)
  })
}

export default {
  name: "reader",
  components: {
    cmpEpub
  },
  data() {
    return {
      fileUrl: "",
      fileObj: "",
      fileType: "ePub",
      fileTypeList: [{ label: "ePub", value: "ePub", component: 'cmpEpub' }],
      pathType: "local",
      pathTypeList: [
        { label: "在线网址", value: "remote" },
        { label: "本地文件", value: "local" },
      ],
      count: 0,
      loadingCount: 0,
    };
  },
  computed: {
    fileTypeActive () {
      let result = {}
      this.fileTypeList.forEach(v => {
        if (v.value === this.fileType) {
          result = {...v}
        }
      })
      return result
    },
    url () {
      return this.pathType === 'local' ? this.fileObj : this.fileUrl
    }
  },
  methods: {
    fileChange (e) {
      if (!e.target.files) {
        return this.$toast('未找到有效文件！')
      }
      if (e.target.files.length === 0) {
        this.fileObj = ''
      } else if (e.target.files[0]) {
        File2ArrayBuffer(e.target.files[0]).then((ab) => {
          this.fileObj = ab
        })
      }
    },
		fullscreenSwitch() {
			if (document.webkitIsFullScreen) {
				document.exitFullscreen()
			} else {
				this.$refs.fieldsetContent && this.$refs.fieldsetContent.requestFullscreen()
			}
		},
    submitHandler () {
      this.count++
    }
    // 选择文件
    // setFilePath() {
    //   let filePaths = dialog.showOpenDialogSync(selfWindow, {
    //     title: "选择文件",
    //     buttonLabel: "确定",
    //     defaultPath: this.$sharedObject("desktopPath"),
    //     properties: ["openFile"],
    //   });
    //   if (filePaths instanceof Array && filePaths.length > 0) {
    //     this.filePath = filePaths[0];
    //   }
    // },
  },
};
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-reader {
  display: flex;
  flex-direction: column;
  fieldset {
    margin-top: .5em;
  }
  .fieldset-content {
    height: 0;
    flex-grow: 1;
    position: relative;
    .btn-link {
      position: absolute;
      top: 15px;
      right: 0;
    }
    .reader-area {
      height: calc(100% - 2em);
    }
  }
}
</style>
